<template>
  <el-tabs v-model="activeName" type="card" class="demo-tabs" @tab-click="handleClick">
    <el-tab-pane label="设备统计" name="first">
      <template #default>
        <FirstCom></FirstCom>
      </template>
    </el-tab-pane>
    <el-tab-pane label="水质统计" name="second">
      <template #default>
        <SecondCom></SecondCom>
      </template>
    </el-tab-pane>
    <el-tab-pane label="消耗产出" name="third"><template #default>
        <ThirdCom></ThirdCom>
      </template></el-tab-pane>
    <el-tab-pane label="出入库分析" name="fourth"><template #default>
        <FourthCom></FourthCom>
      </template></el-tab-pane>
    <el-tab-pane label="运营周报" name="fifth"><template #default>
        <FifthCom></FifthCom>
      </template></el-tab-pane>
    <el-tab-pane label="运营月报" name="sixth"><template #default>
        <SixthCom></SixthCom>
      </template></el-tab-pane>
  </el-tabs>
</template>

<script lang="ts" setup>
import { ref, reactive } from 'vue'
import FirstCom from '@/components/comview/FirstCom.vue'
import SecondCom from '@/components/comview/SecondCom.vue'
import ThirdCom from '@/components/comview/ThirdCom.vue'
import FourthCom from '@/components/comview/FourthCom.vue'
import FifthCom from '@/components/comview/FifthCom.vue'
import SixthCom from '@/components/comview/SixthCom.vue'



const activeName = ref('first')




</script>

<style scoped lang="scss">
.demo-tabs {
  background-color: #fff;
  height: 100%;
  overflow: auto;
  // font-size: 10px;

  ::v-deep {
    // font-size: 10px;

    .el-tabs__header {
      border-bottom: none;
      margin: 0;

      .el-tabs__nav {
        border: 1px solid #ccc;



        .el-tabs__item:hover {
          color: #000;
          // height: 100%;
          // overflow: hidden;
          // line-height: 40px;
          background-color: #fff;
        }

        .is-active,
        .is-active:hover {
          color: #fff;
          // height: 100%;
          // line-height: 41px;
          border-bottom: none;
          background-color: #f66;
        }
      }

    }

    .el-tabs__content {
      padding: 20px;
      overflow: auto;

      .el-button {
        color: #6f6f6f;
        background-color: #d7d7d7;
        border: none;
      }
    }
  }



  .el-tabs__content {
    padding: 32px;
    color: #6b778c;
    font-size: 32px;
    font-weight: 600;
  }
}
</style>